<html>
  <head>
    <style>
      html,
      body {
        background: transparent;
        user-select: none;
      }

      @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 700;
        src: url("fonts/Montserrat-Bold.ttf") format("truetype");
      }

      @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 400;
        src: url("fonts/Montserrat-Regular.ttf") format("truetype");
      }

      body {
        padding: 0;
        margin: 0;
        position: relative;
        font-family: "Montserrat", sans-serif;
      }

      .layer {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 100%;
      }

      .families {
        color: #008000;
      }

      .ballas {
        color: #c400ab;
      }

      .vagos {
        color: #ffbf00;
      }
    </style>
    <script>
      window.addEventListener("load", () => {
        console.log("view loaded");
        00;
        alt.emit("viewLoaded");
      });
    </script>
    <link href="css/kill-list.css" rel="stylesheet" type="text/css" />
    <link href="css/turf-progress.css" rel="stylesheet" type="text/css" />
    <link href="css/team-select.css" rel="stylesheet" type="text/css" />
    <link href="css/players-online.css" rel="stylesheet" type="text/css" />
    <script src="js/kill-list.js"></script>
    <script src="js/turf-progress.js"></script>
    <script src="js/team-select.js"></script>
    <script src="js/players-online.js"></script>
  </head>
  <body>
    <div class="layer kill-list-layer">
      <div class="kill-list"></div>
    </div>
    <div class="layer players-online-layer">
      <div class="players-online">0 players</div>
    </div>
    <div class="layer turf-progress-layer">
      <div class="turf-progress">
        <div class="turf-progress-left"></div>
        <div class="turf-progress-right"></div>
      </div>
      <div class="turf-team-progress">Your team points: <span class="team-points">0 / 1000</span></div>
    </div>
    <div class="layer team-select-layer">
      <div class="team-select">
        <h1>Select your gang:</h1>
        <div class="team-select-item families" onclick="selectTeam(1)">The Families<span>0 players</span></div>
        <div class="team-select-item ballas" onclick="selectTeam(2)">Ballas<span>0 players</span></div>
        <div class="team-select-item vagos" onclick="selectTeam(3)">Vagos<span>0 players</span></div>
      </div>
    </div>
  </body>
</html>
